<template>
    <div class="detail w-full min-h-screen">
        <navbar></navbar>
        <div class="w-[80%] min-h-screen mx-auto  flex justify-between">
            <aside class="leftBar w-[20%]">
                <!-- <announcement></announcement> -->
                <articleNode :toc-list="tocList" @send-anchor="getAnchorForContent"></articleNode>
            </aside>
            <div class="rightBar w-[75%]">
                <article class="flex flex-col">
                    <article-content :data="content" :toc="toc"  @toc-ready="handleTOCReady"></article-content>
                </article>
                <div class="comment w-full">
                    <article-comments :data="childData"></article-comments>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import announcement from '@/components/announcement/announcement.vue'
import articleNode from '@/components/articleNode/articleNode.vue';
import articleContent from './article/articleContent.vue';
import articleComments from '@/components/comments/comments.vue';
import { getArticle } from '@/api/article/index';
import { onMounted, reactive, ref } from 'vue';
import { AsyncTaskHandler } from '@/utils/asyncTaskHandler';
import { useRouter } from 'vue-router';
const $router = useRouter()
const articleId = $router.currentRoute.value.query.id
const content = ref()
const toc = ref()
const childData = reactive({
    articleId: 0,
    authorId: 0,
})
onMounted(() => { 
    // 获取文章数据
    getArticleData()
});
const getArticleData =async () => { 
    let res = await AsyncTaskHandler.handleSingleTask(getArticle(articleId))
    content.value = res.data
    childData.articleId = res.data.articleId
    childData.authorId = res.data.authorId
}
// 新增响应式引用
const tocList = ref([]);

// 接收目录数据
const handleTOCReady = (toc:any) => {
    tocList.value = toc;
};
const getAnchorForContent = (item:any) => {
    toc.value = item
};
</script>

<style scoped lang="scss">
.detail {
    background-image: url('../../../assets/img//wunv.jpg');
    background-size: cover;
    background-attachment: fixed
}

</style>